<template>
  <!-- 普通文件 -->
  <div
    v-if="curFileMenuId != curTabMenuId"
    class="news-child-box"
    :class="{ 'news-child-full': fullWindow }"
  >
    <div
      v-show="newsList.length > 0 && !loading"
      class="news-child-main"
      :class="{ 'news-child-main-full': fullWindow }"
    >
      <div v-for="newsItem in newsList" :key="newsItem.JE_CORE_NOTICE_ID" class="news-child-item">
        <div class="news-child-item-left">
          <div
            class="news-child-item-point"
            :class="{ 'news-read': validateRead(newsItem.NOTICE_LOOKUSERIDS) }"
          ></div>
          <div class="news-child-item-name" @click="readNotice(newsItem)">{{
            newsItem.NOTICE_TITLE
          }}</div>
        </div>
        <div class="news-child-item-right">{{ newsItem.SY_CREATETIME }}</div>
      </div>
    </div>
    <div v-show="newsList.length > 0 && !loading" class="news-page-box">
      <je-pagebar
        :page-size="newsPage.limit"
        :total-count="newsPage.totalCount"
        @load="loadDataByCode"
      ></je-pagebar>
    </div>
    <div v-loading="loading"></div>
    <div v-show="newsList.length == 0 && !loading" class="no-data-box">
      <img :src="noData" alt="" />
      <div class="no-data-explain">暂无数据～</div>
    </div>
  </div>
  <!-- 附件 -->
  <div v-if="curFileMenuId == curTabMenuId" class="news-file-box">
    <div v-show="newsList.length > 0 && !loading" class="news-file-main">
      <div v-for="newsItem in newsList" :key="newsItem.JE_CORE_NOTICE_ID" class="news-file-item">
        <div class="news-file-icon" :style="{ color: formatColor(newsItem.NOTICE_FJ) }">
          <i :class="formatIcon(newsItem.NOTICE_FJ)"></i>
        </div>
        <div class="news-file-name" v-text="formatName(newsItem.NOTICE_FJ)"></div>
        <div class="news-file-download" @click="handleDownload($event, newsItem.NOTICE_FJ)"
          >下载</div
        >
      </div>
    </div>
    <div v-loading="loading"></div>
    <div v-show="newsList.length == 0 && !loading" class="no-data-box">
      <img :src="noData" alt="" />
      <div class="no-data-explain">暂无数据～</div>
    </div>
  </div>
  <!-- 普通文件内容 -->
  <news-info ref="newsInfoRef" :news-item="curNewsItem" />
</template>

<script>
  import { defineComponent, reactive, toRefs, onMounted, ref } from 'vue';
  import JePagebar from '@/components/page-bar.vue';
  import NewsInfo from '@/views/board-home/components/news-info.vue';
  import noData from '@/assets/no-data.png';
  import { getCurrentUser, decode, getFileUrlByKey } from '@jecloud/utils';
  import { GetNewsList, UpdateNoticeStatus } from '@/api';
  import { FILE_TYPES, FILE_UNKNOWN } from '@/helper/constant';
  export default defineComponent({
    name: 'NewsList',
    components: { JePagebar, NewsInfo },
    props: {
      newsCode: {
        type: String,
        default: () => '',
      },
      fullWindow: {
        type: Boolean,
        default: () => false,
      },
      activeMenuId: {
        type: String,
        default: () => '',
      },
      fileMenuId: {
        type: String,
        default: () => '',
      },
    },
    setup(props) {
      const userId = getCurrentUser()?.id; //用户id
      let loading = ref(false); //请求数据loading
      const state = reactive({
        newsInfoRef: null, //新闻信息
        noData, //缺省图
        activeNewsCode: props.newsCode,
        newsList: [], //新闻列表
        newsPage: {
          tableCode: 'JE_CORE_NOTICE', //表名
          funcCode: 'JE_CORE_NOTICE', //功能名and NOTICE_TYPE_CODE = ${props.newsCode}
          // permSql: `and NOTICE_QY = '1' and NOTICE_TYPE_CODE = ${props.newsCode} order by SY_CREATETIME asc , SY_ORDERINDEX asc`, //条件
          noticeType: props.newsCode, //新闻类型code
          page: 1, //当前页
          limit: 10, //每页条数
          totalCount: 0, //总条数
        },
        curNewsItem: {}, //当前新闻对象
        curTabMenuId: props.activeMenuId, //当前选择的文件类型
        curFileMenuId: props.fileMenuId, //文件类型
      });
      const methods = {
        loadDataByCode(pageInfo) {
          //根据code加载对应新闻内容
          if (pageInfo) {
            state.newsPage.page = pageInfo.page;
          }
          loading.value = true;
          GetNewsList(state.newsPage).then((res) => {
            if (res.code == 1000 && res.success) {
              const resData = res.data;
              state.newsList = resData.rows;
              state.newsPage.totalCount = resData.totalCount;
              setTimeout(() => {
                loading.value = false;
              }, 100);
            }
          });
        },
        getDataNoLoad() {
          //没有loading的请求数据
          GetNewsList(state.newsPage).then((res) => {
            if (res.code == 1000 && res.success) {
              const resData = res.data;
              state.newsList = resData.rows;
              state.newsPage.totalCount = resData.totalCount;
            }
          });
        },
        validateRead(readUserIds) {
          //验证该条信息是否已读
          if (readUserIds) {
            const readIds = readUserIds.split(',');
            return readIds.includes(userId);
          }
        },
        handleNoticeStatus(notice) {
          //标记已读状态
          const param = {
            tableCode: 'JE_CORE_NOTICE',
            NOTICE_LOOKUSERIDS: userId,
            JE_CORE_NOTICE_ID: notice.JE_CORE_NOTICE_ID,
          };
          UpdateNoticeStatus(param).then((res) => {
            if (res.code == 1000 && res.success) {
              state.curNewsItem = { ...notice };
              // state.newsList.forEach((newsItem) => {
              //   if (newsItem.JE_CORE_NOTICE_ID == notice.JE_CORE_NOTICE_ID) {
              //     const temUserIds = newsItem.NOTICE_LOOKUSERIDS;
              //     temUserIds.split(',').push(userId);
              //     newsItem.NOTICE_LOOKUSERIDS = temUserIds.toString();
              //   }
              // });
              methods.getDataNoLoad();
              state.newsInfoRef.newsInfoVisible = true;
            }
          });
        },
        readNotice(notice) {
          //阅读该条信息
          const lookUserIds = notice.NOTICE_LOOKUSERIDS;
          if (lookUserIds) {
            const readUserIds = lookUserIds.split(',');
            if (readUserIds.includes(userId)) {
              //已读
              state.curNewsItem = { ...notice };
              state.newsInfoRef.newsInfoVisible = true;
            } else {
              //未读
              methods.handleNoticeStatus(notice);
            }
          } else {
            //未读
            methods.handleNoticeStatus(notice);
          }
        },
        getType(name) {
          //获取文件格式
          const type = name.substring(name.lastIndexOf('.') + 1);
          return type.toLowerCase();
        },
        formatColor(fileStr) {
          //转换对应文件颜色
          const file = decode(fileStr);
          const fileType = methods.getType(file.relName);
          for (let typeItem of FILE_TYPES) {
            if (typeItem.suffixs.includes(fileType)) {
              return typeItem.color;
            }
          }
          return FILE_UNKNOWN.color;
        },
        formatIcon(fileStr) {
          //转换对应文件图标
          const file = decode(fileStr);
          const fileType = methods.getType(file.relName);
          for (let typeItem of FILE_TYPES) {
            if (typeItem.suffixs.includes(fileType)) {
              return typeItem.class;
            }
          }
          return FILE_UNKNOWN.class;
        },
        formatName(fileStr) {
          //转换文件名称
          const file = decode(fileStr);
          return file.relName;
        },
        handleDownload(e, fileStr) {
          //下载文件
          e.stopPropagation();
          const $a = document.createElement('a');
          const file = decode(fileStr);
          const path = getFileUrlByKey(file.fileKey);
          $a.setAttribute('href', path);
          $a.setAttribute('download', file.relName);
          $a.click();
        },
      };
      onMounted(() => {
        methods.loadDataByCode();
      });
      return {
        loading,
        ...toRefs(state),
        ...methods,
      };
    },
  });
</script>
<style>
  .news-child-box .je-loading {
    height: 350px;
    background-color: rgba(255, 255, 255, 0.6);
    transition: opacity 0.3s;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  .news-child-full {
    height: calc(100vh - 130px) !important;
  }
  .news-child-main-full {
    height: calc(100vh - 180px) !important;
  }
  .news-child-full .je-loading {
    height: calc(100vh - 180px) !important;
  }
</style>
<style scoped lang="less">
  .news-child-box {
    width: 100%;
    height: 350px;
    padding: 5px 0;
    box-sizing: border-box;
    .news-child-main {
      width: 100%;
      height: 300px;
      padding-right: 20px;
      overflow-y: auto;
    }
    .news-child-main::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
    .news-child-item {
      width: 100%;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .news-child-item-left {
        display: flex;
        align-items: center;
        .news-child-item-point {
          width: 6px;
          height: 6px;
          background-color: #ff625c;
          border-radius: 50%;
        }
        .news-read {
          background-color: #a9aba9;
        }
        .news-child-item-name {
          padding-left: 10px;
          font-size: 14px;
          color: #3f3f3f;
        }
      }
      .news-child-item-right {
        font-size: 14px;
        color: #3f3f3f;
      }
    }
    .news-child-item:hover {
      .news-child-item-name {
        color: @primary-color;
        cursor: pointer;
      }
      .news-child-item-right {
        color: @primary-color;
      }
    }
    .news-page-box {
      width: 100%;
      height: 40px;
      padding: 7px 20px 6px 0;
      border-top: 1px solid #f5f5f5;
      box-sizing: border-box;
    }
  }
  .news-file-box {
    width: 100%;
    height: 335px;
    margin-top: 15px;
    box-sizing: border-box;
    overflow: auto;
    .news-file-main {
      display: flex;
      flex-wrap: wrap;
    }
    .news-file-item {
      width: 70px;
      height: 85px;
      margin: 5px;
      padding: 5px;
      box-sizing: border-box;
      cursor: pointer;
      text-align: center;
      position: relative;
      .news-file-icon {
        width: 42px;
        height: 42px;
        margin: 0 auto;
        i {
          font-size: 40px;
        }
      }
      .news-file-name {
        max-height: 36px;
        line-height: 16px;
        font-size: 12px;
        margin-top: 8px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        -webkit-line-clamp: 2;
      }
      .news-file-download {
        font-size: 12px;
        padding: 2px 8px;
        color: #000;
        position: absolute;
        bottom: 0;
        right: 0;
        border: 1px solid #000;
        border-radius: 4px;
        background: #fff;
        display: none;
      }
    }
    .news-file-item:hover {
      background-color: #efefef;
      .news-file-download {
        display: block;
      }
    }
  }
  .news-file-box::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  .no-data-box {
    width: 100%;
    img {
      display: block;
      width: 319px;
      height: 194px;
      margin: 50px auto 0;
    }
    .no-data-explain {
      width: 100%;
      text-align: center;
      font-size: 14px;
      color: #a9aba9;
      padding-top: 20px;
    }
  }
</style>
